@charset "utf-8";
/* CSS Document */

/*AQUI COMEÇA COMANDO RESPONSIVO PARA 480PX*/

@media screen and (max-width:480px){

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:Verdana, Geneva, sans-serif;
}

h1.jogo{
	display:none;
}

h2.jogo{
	font-size:2em;
	line-height:2em;
}

p.jogo{
	font-size:1em;
	line-height:2em;
}

section.numeros-primos{
	width: 90%;
	height: 273px;
	/*width: 100vw;*/
	/*height: 100vh;*/
	margin: auto;
	position:relative;
	/*background-color: #2b7cb4;*/
	/*z-index:15;*/
	border:	black 2px solid;
	border-radius:5px;
	box-shadow: 0px 0px 10px rgba(0,0,0,1);
	/*background-image:url(../imagem-13-jogos-matematicos/013-008-01-fundo-logotipo-jogos-matematicos.png);*/
	/*background-repeat: repeat-y;*/
	/*background-position: 50% ;*/
	cursor:	url(../imagem-13-jogos-matematicos/013-014-01-cursor.jpg), pointer;
	box-sizing:border-box;
}

section.numeros-primos img{
	display:block;
	max-width:100%;
	height:auto;
	margin: 0px 0px 0px -10px;
}


section.iniciar{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    z-index:20;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
	
}

label[for="iniciar"]{
	width:30%;
	height:auto;
	display:block;
	background:#FC0;
	margin:5% auto 5%  auto;
	border-radius: 10px 0px 10px 0px;
	box-shadow: 4px 4px 30px white;
	color:black;
	font-size:2em;
	text-align:center;
	line-height:2em;
	font-weight:900;
}

label[for="iniciar"]:hover {
    color: #FC0;
    background-color: white;
	text-shadow: 2px 2px 2px black;
}

input#iniciar:checked~.iniciar{
	display:none;
	
}

input#iniciar{
	display:none;
	width:0px;
	height:0px;
}


/*AREA DO JOGO*/

div.jogo{
	position:absolute;
	width:100%;
	height:100%;
	margin:auto;
	/*observacao - imagem da trilha tem que estar no css, para que os botoes funcionem 
	com espelhamento correto nos deslocamentos*/
	background:	url(../imagem-13-jogos-matematicos/013-015-02-fundo-jogo-versao-480.jpg);
	
}

div.jogo img{
	display:block;
	max-width:100%;
	height:auto;
	/*background-size: contain;*/
	margin: 0px 0px 0px -10px;
	/*background-repeat: no-repeat;*/
}

/*BOTOES */

.botao2, #b2, #m2 {
	width:20px;
	height:20px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;
	/*border-radius: 50%;*/
	animation-name: anima2;
	animation-duration:8s;
	animation-iteration-count:4;
	animation-timing-function:linear;
}

@keyframes anima2 {
0% {top:0; left:0; 	z-index:-1;}
1%{top:0; left:0; z-index:2;}
20%  {background-color:yellow; top:110px; left:0px;}
40%  {background-color:blue; top:110px; left:90px;}
60%  {background-color:green; top:240px; left:90px;}
80% {background-color:red; top:240px; left:133px;}
90% {background-color:cyan; top:250px; left:133px;}	  
100% {top: calc(100% - 30px) ;z-index:2;}
}


.botao3, #b3, #m3 {
	width:20px;
	height:20px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;
	/*border-radius: 50%;*/	
	animation-name: anima3;
	animation-duration:9s;
	animation-iteration-count:4;
	animation-timing-function:linear;
}

@keyframes anima3 {
0% {top:0; left:88; 	z-index:-1;}
1%{top:0; left:88; z-index:2;}
20%  {background-color:magenta; top:0px; left:88px;}
40%  {background-color:blue; top:132px; left:88px;}
60%  {background-color:green; top:132px; left:133px;}
70% {background-color:yellow; top:198px; left:133px;}
80% {background-color:purple; top:198px; left:176px;}	
90% {background-color:purple; top:250px; left:176px;}	    
100% {top: calc(100% - 20px) ; z-index:2;}
}

.botao5, #b5, #m5{
	width:20px;
	height:20px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;	
	animation-name: anima5;
	animation-duration:7s;
	animation-iteration-count:4;
	animation-timing-function:linear;
}

@keyframes anima5 {
0% {top:0; left:133; 	z-index:-1;}
1%{top:0; left:133; z-index:2;}
20%  {background-color:yellow; top:0px; left:133px;}
40%  {background-color:blue; top:45px; left:133px;}
60%  {background-color:green; top:45px; left:176px;}
80% {background-color:purple; top:250px; left:176px;}
/*90% {background-color:cyan; top:257px; left:257px;}*/
/*95% {background-color:red; top:300px; left:257px;}*/	  
100% { top: calc(100% - 20px) ; z-index:2;}
}


	
.botao7, #b7, #m7{
	width:20px;
	height:20px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;	
	animation-name: anima7;	
	animation-duration:8s;
	animation-iteration-count:4;
	animation-timing-function:linear;
}

@keyframes anima7 {
0% {top:250; left:220; 	z-index:-1;}
1%{top:250; left:220; z-index:2;}
20%  {background-color:yellow; top:250px; left:220px;}
30%  {background-color:blue; top:175px; left:220px;}
40%  {background-color:green; top:175px; left:263px;}
50% {background-color:red; top:41px; left:263px;}
70% {background-color:magenta; top:41px; left:220px;}
80% {background-color:cyan; top:0px; left:220px;}
/*90% {background-color:red; top:400px; left:320px;}*/	  
100% {top: calc(100% - 20px) ;z-index:2;}
}


.botao11, #b11, #m11{
	width:20px;
	height:20px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;	
	animation-name: anima11;	
	animation-duration:8s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima11 {
0% {top:110; left:345; 	z-index:-1;}
1%{top:110; left:345; z-index:2;}
20%  {background-color:yellow; top:110px; left:345px;}
40%  {background-color:blue; top:110px; left:305px;}
60%  {background-color:green; top:175px; left:305px;}
80% {background-color:red; top:175px; left:175px;}
90% {background-color:red; top:240px; left:175px;}
/*100% {background-color:red; top:600px; left:850px;}*/	  
100% {  top: calc(100% - 20px) ; z-index:2;}
}


.botao13, #b13, #m13{
	width:30px;
	height:30px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:20px;	
	animation-name: anima13;	
	animation-duration:9s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima13 {
0% {top:0; left:950; 	z-index:-1;}
1%{top:0; left:950; z-index:2;}
20%  {background-color:yellow; top:0px; left:950px;}
40%  {background-color:blue; top:250px; left:950px;}
60%  {background-color:green; top:250px; left:1100px;}
80% {background-color:red; top:450px; left:1100px;}
90% {background-color:red; top:450px; left:1000px;}
100% {background-color:red; top:600px; left:1000px;}	  
100% {/*  top: calc(100% - 34px) ;*/ z-index:2;}
}

.botao17, #b17, #m17{
	width:30px;
	height:30px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:20px;	
	animation-name: anima17;	
	animation-duration:8s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima17 {
0% {top:0; left:1250; 	z-index:-1;}
1%{top:0; left:1250; z-index:2;}
20%  {background-color:yellow; top:0px; left:1250px;}
40%  {background-color:blue; top:100px; left:1250px;}
60%  {background-color:green; top:100px; left:1200px;}
80% {background-color:red; top:350px; left:1200px;}
90% {background-color:red; top:350px; left:1300px;}
100% {background-color:red; top:550px; left:1300px;}	  
100% {/*  top: calc(100% - 34px) ;*/ z-index:2;}
}

.botao19, #b19, #m19{
	width:30px;
	height:30px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:20px;	
	animation-name: anima19;	
	animation-duration:7s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima19 {
0% {top:550; left:200; 	z-index:-1;}
1%{top:550; left:200; z-index:2;}
20%  {background-color:yellow; top:550px; left:200px;}
40%  {background-color:blue; top:550px; left:300px;}
60%  {background-color:green; top:300px; left:300px;}
80% {background-color:red; top:300px; left:600px;}
90% {background-color:red; top:0px; left:600px;}
/*100% {background-color:red; top:550px; left:1300px;}*/	  
100% {/*  top: calc(100% - 34px) ;*/ z-index:2;}
}

.botao23, #b23, #m23{
	width:30px;
	height:30px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:20px;	
	animation-name: anima23;	
	animation-duration:8s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima23 {
0% {top:550; left:500; 	z-index:-1;}
1%{top:550; left:500; z-index:2;}
20%  {background-color:yellow; top:550px; left:500px;}
40%  {background-color:blue; top:400px; left:500px;}
60%  {background-color:green; top:400px; left:700px;}
70%  {background-color:green; top:250px; left:700px;}
80% {background-color:red; top:250px; left:800px;}
85% {background-color:red; top:500px; left:800px;}
90% {background-color:red; top:500px; left:850px;}
100% {background-color:red; top:600px; left:850px;}	  
100% {/*  top: calc(100% - 34px) ;*/ z-index:2;}
}

.botao29, #b29, #m29{
	width:30px;
	height:30px;
	background-color:rgb(0, 0, 255, 1);
	position:absolute;
	z-index: -1;
	color: white;
	font-size:20px;	
	animation-name: anima29;	
	animation-duration:7s;
	animation-iteration-count:5;
	animation-timing-function:linear;
}

@keyframes anima29 {
0% {top:550; left:1000; 	z-index:-1;}
1%{top:550; left:1000; z-index:2;}
20%  {background-color:yellow; top:550px; left:1000px;}
40%  {background-color:blue; top:450px; left:1000px;}
60%  {background-color:green; top:450px; left:1100px;}
70%  {background-color:green; top:200px; left:1100px;}
80% {background-color:red; top:200px; left:1050px;}
85% {background-color:red; top:100px; left:1050px;}
90% {background-color:red; top:0px; left:1050px;}
/*100% {background-color:red; top:600px; left:850px;}*/	  
100% {/*  top: calc(100% - 34px) ;*/ z-index:2;}
}


/*MOEDAS */

input.moeda{
	/*color: white;*/
 	/*background-color:rgba(255, 255, 0, 0.1);*/
	/*	box-shadow: 0px 0px 10px 4px darkgoldenrod;*/
	/*position:relative;*/
	position:absolute;
	/*z-index: -1;*/
	font-size:20px;
	width:50px;
	height:50px;
	/*border-radius: 50%;*/
	/*left:5%;*/
	/*top:268px;*/
	animation-name: anima;
	/*animation-duration: 4s;*/
	-webkit-appearance:none;
	appearance:none;
	
}

/*CONTADOR*/

div.jogo{
	counter-reset: pontos;
}

div.jogo::after{
	content:"Total: " counter(pontos) "/5";
	z-index: 5;  /*bub ? - mesmo com z-index - não funcionou - bolinha fica em cima do placar*/
	width:100px;
	height:20px;
	/*top:10px;*/
	/*right:80px;*/
	float:right;
	font-size:14px;
	font-weight:bolder;	
	text-align:center;
	vertical-align:	middle;
	color:#FFF;
	background-color:#C00;
	/*margin:5% auto 5%  auto;*/
	border-radius: 5px 0px 5px 0px;
	box-shadow: 7px 7px 30px black;
}

input.moeda:checked{
	counter-increment:pontos;
	visibility:hidden;
}


/*GAME OVER*/

/*está desligado no HTML, pois está com BUG,
fica piscando */

div.opa{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	top:0;
	left:0;
	background-color:red;
	z-index:10;
	font-size:24px;
	font-weight:bolder;	
	text-align:center;
	vertical-align:	middle;
	/*line-height:100%;*/
}

button.botao:hover ~ div.opa{
	display:block;
}

div.opa:hover{
	display:block;
}

}